<template>
  <div class="foot">
    <div class="f-top banxin2">
      <ul class="tanxin">
        <li><a href="#"></a><span>音乐开放平台</span></li>
        <li><a href="#"></a><span>云村交易所</span></li>
        <li><a href="#"></a><span>Amped Studio</span></li>
        <li><a href="#"></a><span>用户认证</span></li>
        <li><a href="#"></a><span>音乐交易所</span></li>
        <li><a href="#"></a><span>赞赏</span></li>
        <li><a href="#"></a><span>视频激励</span></li>
      </ul>
    </div>
    <div class="f-bottom banxin2">
      <p class="link"
         id="music-link">
        <a href="//st.music.163.com/official-terms/service"
           target="_blank"
           class="item s-fc3">服务条款</a><span class="line">|</span>
        <a href="//st.music.163.com/official-terms/privacy"
           target="_blank"
           class="item s-fc3">隐私政策</a><span class="line">|</span>
        <a href="//st.music.163.com/official-terms/children"
           target="_blank"
           class="item s-fc3">儿童隐私政策</a><span class="line">|</span>
        <a href="//music.163.com/st/staticdeal/complaints.html"
           target="_blank"
           class="item s-fc3">版权投诉</a><span class="line">|</span>
        <a href="http://ir.music.163.com"
           target="_blank"
           class="item s-fc3">投资者关系</a><span class="line">|</span>
        <a href="https://music.163.com/ui/resource"
           rel="noopener noreferrer"
           target="_blank"
           class="item s-fc3">广告合作</a>
        <span class="line">|</span>
        <a onclick="nm.x.biLog('click', {mspm:'61f261f4b99b0d5882ce3a78',page:'web_netease_music_homepage',target:'base_fast_access'});return true;"
           href="//mp.music.163.com/600948c936c13f4d09752e73/contact-us-web/index.html?source=Music-Main-Station"
           target="_blank"
           class="s-fc3 item">联系我们</a>
      </p>
      <p class="right s-fc3">
        <a href="https://jubao.163.com"
           target="_blank"
           class="sep alink s-fc3">廉正举报</a>
        <span class="sep span">不良信息举报邮箱: 51jubao@service.netease.com</span>
        <span class="span">客服热线：95163298</span>
      </p>
      <p class="right s-fc3">
        <span class="span">互联网宗教信息服务许可证：浙（2022）0000120</span>
        <span class="span">增值电信业务经营许可证：浙B2-20150198</span>
        <a href="https://beian.miit.gov.cn/#/Integrated/index"
           rel="noopener noreferrer"
           target="_blank"
           class="alink s-fc3">粤B2-20090191-18&nbsp;&nbsp;工业和信息化部备案管理系统网站</a>
      </p>
      <p class="right s-fc3">
        <span class="sep span">网易公司版权所有©1997-2023</span><span class="span">杭州乐读科技有限公司运营：</span><a
           href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/8282703158/452a/ca0c/3a10/caad83bc8ffaa850a9dc1613d74824fc.png"
           target="_blank"
           class="alink s-fc3">浙网文[2021] 1186-054号</a>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010902002564"
           rel="noopener noreferrer"
           target="_blank"
           class="alink s-fc3 police-link">
          <span class="police-logo"></span>
          <span class="police-text">浙公网安备 33010902002564号</span>
        </a>
      </p>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
@import '@/assets/css/base.less';
.foot {
  position: relative;
  height: 325px;
  overflow: hidden;
  border-top: 1px solid #d3d3d3;
  background: #f2f2f2;
  .f-top {
    margin-top: 33px;
    ul {
      justify-content: center;
      li {
        color: #666;
        padding-left: 80px;
        width: 45px;
        a {
          width: 45px;
          height: 45px;
          display: block;
          float: none;
          margin: 0 auto;
        }
        &:nth-of-type(1) > a {
          background: url(../assets/image/foot_enter_new2.png) no-repeat;
          background-position: -170px -5px;
          background-size: 220px 220px;
          &:hover {
            background-position: -5px -115px;
          }
        }
        &:nth-of-type(2) > a {
          background: url(../assets/image/foot_enter_new2.png) no-repeat;
          background-position: -5px -170px;
          background-size: 220px 220px;
          &:hover {
            background-position: -60px -170px;
          }
        }
        &:nth-of-type(3) > a {
          background: url(../assets/image/foot_enter_new2.png) no-repeat;
          background-position: -5px -60px;
          background-size: 220px 220px;
          &:hover {
            background-position: -60px -5px;
          }
        }
        &:nth-of-type(4) > a {
          background: url(../assets/image/foot_enter_new2.png) no-repeat;
          background-position: -60px -60px;
          background-size: 220px 220px;
          &:hover {
            background-position: -115px -5px;
          }
        }
        &:nth-of-type(5) > a {
          background: url(../assets/image/foot_enter_new2.png) no-repeat;
          background-position: -115px -115px;
          background-size: 220px 220px;
          &:hover {
            background-position: -5px -5px;
          }
        }
        &:nth-of-type(6) > a {
          background: url(../assets/image/foot_enter_new2.png) no-repeat;
          background-position: -170px -115px;
          background-size: 220px 220px;
          &:hover {
            background-position: -60px -115px;
          }
        }
        &:nth-of-type(7) > a {
          background: url(../assets/image/foot_enter_new2.png) no-repeat;
          background-position: -170px -60px;
          background-size: 220px 220px;
          &:hover {
            background-position: -115px -60px;
          }
        }
        span {
          display: inline-block;
          width: 100px;
          margin-top: 10px;
          margin-left: -27.5px;
          font-weight: 400;
          font-size: 12px;
          text-align: center;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
  .f-bottom {
    padding-top: 60px;
    line-height: 24px;
    margin: 0 auto;
    text-align: center;
    .link {
      .item {
        color: #666;
        font-size: 12px;
      }
      .line {
        margin: 0 8px 0 8px;
        color: #d9d9d9;
      }
    }
    .s-fc3 {
      font-size: 12px;
      .alink {
        color: #666;
      }
    }
  }
}
</style>